<template>
	<view class="register-container">
		<!-- <u-navbar title="注册" @leftClick="navigateBack" safeAreaInsetTop fixed placeholder></u-navbar> -->
		<view class="form-container">
			<u--form labelPosition="left" :model="model1" ref="form1" :labelWidth="80">
				<u-form-item label="用户名" prop="userInfo.userName" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.userName" border="none" placeholder="请输入用户名"></u--input>
				</u-form-item>

				<u-form-item label="账号" prop="userInfo.userAcc" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.userAcc" border="none" placeholder="请输入账号"></u--input>
				</u-form-item>

				<u-form-item label="密码" prop="userInfo.userPassword" borderBottom>
					<u--input v-model="model1.userInfo.userPassword" type="password" border="none" placeholder="请输入密码">
					</u--input>
				</u-form-item>

				<u-form-item label="身份证" prop="userInfo.idCard" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.idCard" border="none" placeholder="请输入身份证号(18位)"></u--input>
				</u-form-item>

				<u-form-item label="手机号" prop="userInfo.userPhone" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.userPhone" border="none" placeholder="请输入手机号"></u--input>
				</u-form-item>

				<u-form-item label="邮箱" prop="userInfo.userEmail" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.userEmail" border="none" placeholder="请输入邮箱地址"></u--input>
				</u-form-item>

				<u-form-item label="验证码" prop="userInfo.code" borderBottom>
					<u--input v-model="model1.userInfo.code" border="none" placeholder="请输入验证码"></u--input>
					<u-button slot="right" type="primary" size="mini" @click="getCode" class="verify-code-btn" :class="{'disabled': countdown > 0}" customStyle="min-width: 180rpx; height: 70rpx; line-height: 70rpx; padding: 0 20rpx; margin-left: 20rpx; border-radius: 35rpx; background: linear-gradient(to right, #44ADFB, #0070FF); box-shadow: 0 6rpx 12rpx rgba(0, 112, 255, 0.2); transition: all 0.3s ease;">{{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}</u-button>
				</u-form-item>

				<u-form-item label="性别" prop="userInfo.sex" borderBottom @click="showSexAction = true; hideKeyboard()"
					ref="item1">
					<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</u--form>
			<view class="btn-group">
				<u-button type="primary" text="注册" customStyle="margin-top: 50px" @click="submit"></u-button>
				<u-button type="error" text="重置信息" customStyle="margin-top: 20px" @click="reset"></u-button>
			</view>
		</view>
		
		<u-action-sheet :show="showSexAction" :actions="actions" @select="sexSelect" @close="showSexAction = false" cancelText="取消"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model1: {
					userInfo: {
						userName: '',
						userAcc: '',
						userPassword: '',
						idCard: '',
						userPhone: '',
						userEmail: '',
						userSex: '',
						userMoney: 0,
						userStatus: 1
					}
				},
				showSexAction: false,
				countdown: 0,
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
				],
				rules: {
					'userInfo.userName': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change']
					},
					'userInfo.userAcc': [{
						type: 'string',
						required: true,
						message: '请填写账号',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							return uni.$u.test.rangeLength(value,[4, 10]);
						},
						message: "账号长度在4-10个字符之间",
						trigger: ["change", "blur"],
					}],
					'userInfo.userPassword': {
						type: 'string',
						required: true,
						min: 6,
						max: 20,
						message: '密码长度在6-20个字符之间',
						trigger: ['blur', 'change']
					},
					'userInfo.idCard': {
						type: 'string',
						required: true,
						message: '请填写身份证号',
						trigger: ['blur', 'change'],
						validator: (rule, value, callback) => {
							return uni.$u.test.idCard(value);
						},
						message: "请输入正确的身份证号码"
					},
					'userInfo.userPhone': {
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change'],
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: "请输入正确的手机号码"
					},
					'userInfo.userEmail': [{
						type: 'string',
						required: true,
						message: '请填写邮箱地址',
						trigger: ['blur', 'change'],
						validator: (rule, value, callback) => {
							return uni.$u.test.email(value);
						},
						message: "请输入正确的邮箱地址"
					}],
					'userInfo.code': {
						type: 'string',
						required: true,
						len: 6,
						message: '请填写6位验证码',
						trigger: ['blur']
					},
					'userInfo.userSex': {
						type: 'string',
						required: true,
						message: '请选择性别',
						trigger: ['blur', 'change']
					}
				},
			}
		},
		onReady() {
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			// navigateBack() {
			// 	uni.navigateBack()
			// },
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.form1.validateField('userInfo.sex')
			},
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {
					// 构建用户数据对象
					const userData = {
						userName: this.model1.userInfo.userName,
						userAcc: this.model1.userInfo.userAcc,
						userPassword: this.model1.userInfo.userPassword,
						idCard: this.model1.userInfo.idCard,
						userPhone: this.model1.userInfo.userPhone,
						userEmail: this.model1.userInfo.userEmail,
						userSex: this.model1.userInfo.userSex,
						userMoney: 0,
						userStatus: 1, 
					};
					
					// 显示加载提示
					uni.showLoading({
						title: '注册中...'
					});
					
					// 使用封装的请求方法发送注册请求
					this.$request({
						url: `/user-service/user/register?code=${this.model1.userInfo.code}`,
						method: 'POST',
						data: userData,
						header: {
							'content-type': 'application/json'
						}
					}).then(res => {
						uni.hideLoading();
						uni.$u.toast('注册成功');
						// 注册成功后跳转到登录页
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login/login'
							});
						}, 1500);
					}).catch(err => {
						uni.hideLoading();
						uni.$u.toast(err.message || '注册失败，请稍后再试');
					});
				}).catch(errors => {
					uni.$u.toast('请完善注册信息');
				});
			},
			reset() {
				this.$refs.form1.resetFields()
				this.$refs.form1.clearValidate()
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			// 获取验证码
			getCode() {
				if(this.countdown > 0) return;
				if(!this.model1.userInfo.userEmail) {
					uni.$u.toast('请先填写邮箱地址');
					return;
				}
				if(!uni.$u.test.email(this.model1.userInfo.userEmail)) {
					uni.$u.toast('邮箱格式不正确');
					return;
				}
				
				// 开始倒计时
				this.countdown = 60;
				const timer = setInterval(() => {
					if(this.countdown > 0) {
						this.countdown--;
					} else {
						clearInterval(timer);
					}
				}, 1000);
				
				// 调用后端发送验证码接口
				this.$request({
					url: '/emailcode-service/email/code',
					method: 'GET',
					data: {
						email: this.model1.userInfo.userEmail
					},
				}).then(res => {
					if (res.message === '验证码发送成功') {
						uni.$u.toast('验证码已发送至邮箱');
					} else {
						uni.$u.toast('验证码发送失败');
						// 发送失败时重置倒计时
						this.countdown = 0;
						clearInterval(timer);
					}
				}).catch(err => {
					console.log(err);
					uni.$u.toast('验证码发送失败');
					// 发送失败时重置倒计时
					this.countdown = 0;
					clearInterval(timer);
				});
			}
			
				// uni.hideKeyboard()
			}
		
	}
</script>

<style lang="scss">
.register-container {
	min-height: 100vh;
	background-color: #f8f8f8;
	
	.form-container {
		padding: 30rpx;
		
		.form-header {
			padding: 30rpx 0 60rpx;
			text-align: center;
			
			.form-title {
				font-size: 42rpx;
				font-weight: bold;
				color: #333;
				display: block;
				margin-bottom: 20rpx;
			}
			
			.form-subtitle {
				font-size: 28rpx;
				color: #999;
			}
		}
		
		/deep/ .u-form-item {
			padding: 24rpx 0;
			
			.u-form-item__body__left__content {
				color: #333;
				font-weight: 500;
			}
			
			.u-input {
				height: 80rpx;
			}
			
			.verify-code-btn {
				min-width: 180rpx;
				height: 70rpx;
				line-height: 70rpx;
				padding: 0 20rpx;
				margin-left: 20rpx;
				border-radius: 35rpx;
				background: linear-gradient(to right, #44ADFB, #0070FF);
				box-shadow: 0 6rpx 12rpx rgba(0, 112, 255, 0.2);
				transition: all 0.3s ease;
				
				&.disabled {
					background: #ccc;
					box-shadow: none;
					opacity: 0.8;
				}
				
				&:active {
					transform: scale(0.98);
					box-shadow: 0 3rpx 6rpx rgba(0, 112, 255, 0.1);
				}
			}
		}
		
		.btn-group {
			padding: 40rpx 20rpx;
			
			/deep/ .u-button {
				height: 90rpx;
				border-radius: 45rpx;
				
				&--primary {
					background: linear-gradient(to right, #44ADFB, #0070FF);
					box-shadow: 0 10rpx 20rpx rgba(0, 112, 255, 0.2);
				}
				
				&--error {
					background: #fff;
					color: #666;
					border: 2rpx solid #ddd;
				}
				
				&__text {
					font-size: 32rpx;
					font-weight: 500;
				}
			}
		}
	}
}
</style>
